<template>

	<view>
		<dsl-navbar title="用户信息" bgTopImg="white" isBack=""></dsl-navbar>
		<view style="padding-top: 10px;">
			<view class="beijing" :style="{height: windowHeight}">
				<view class="oneRow rowjbic" @click="updataImgList">
					<view class="fs26 cccc">头像</view>
					<image style="width: 80rpx;height: 80rpx;" :src="avatar?avatar:'/static/user/userImg.png'" mode="">
					</image>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">名称</view>
					<input type="text" placeholder="请输入您的昵称" v-model="userName" />
				</view>
				<!-- 	<view class="oneRow rowjbic">
					<view class="fs26 cccc">邮箱</view>
					<input type="text" placeholder="请输入您的邮箱" />
				</view> -->
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">年龄</view>
					<input type="text" placeholder="请输入年龄" v-model="age" />
				</view>
				<view class="oneRow rowjbic" @click="sexMen()">
					<view class="fs26 cccc">性别</view>
					<!-- <input type="text" placeholder="请输入您的性别" /> -->
					{{gender}}
				</view>
				<!-- 	<view class="oneRow rowjbic">
					<view class="fs26 cccc">电话</view>
					<input type="text" placeholder="请输入您的电话" />
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">所在区域</view>
					<input type="text" placeholder="请输入您的区域" />
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">详细地址</view>
					<input type="text" placeholder="请输入您的地址" />
				</view> -->
				<view class="rowjc" @click="post_updateUser">
					<view class="baocun">保存修改</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updataImgList
	} from '../../../common/updataImgList.js'
	import {
		post_updateUser,
		getUserInfo
	} from '../../../common/path.js'
	export default {
		data() {
			return {
				windowHeight: 0, //可用窗口的高度
				userName: '', //用户名称
				avatar: '', //头像修改
				age: '', //年龄
				gender: '', //性别
			}
		},
		onReady() {
			this.getWindowHeight()
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				let data = {
					id: uni.getStorageSync('userInfo').id
				}
				console.log('[传参]', data);
				this.Http.POST(getUserInfo, data)
					.then((res) => {
						console.log('[用户信息]', res);
						if (res.code == 0) {
							this.userInfo = res.data
							this.gender = res.data.gender
							this.avatar = res.data.avatar
							this.userName = res.data.userName
							this.age = res.data.age
							uni.setStorageSync('userInfo', res.data)
							this.isUserLogin = true
						} else {
							this.isUserLogin = false
						}
					})
			},

			//头像上传
			updataImgList() {
				updataImgList()
					.then((res) => {
						if(res.code == 0) {
							this.avatar = res.data
						}
						console.log('[图片]', res.data);
					})

			},
			//选择性别
			sexMen() {
				let _this = this
				uni.showActionSheet({
					itemList: ['男', '女'],
					success: function(res) {
						if (res.tapIndex == 0) {
							_this.gender = '男'
						} else {
							_this.gender = '女'
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

			getWindowHeight() {
				this.windowHeight = uni.getSystemInfoSync().windowHeight - 10 + 'px'
			},
			//修改资料
			post_updateUser() {
				let data = {
					id: uni.getStorageSync('userInfo').id,
					userName: this.userName, //用户名称
					avatar: this.avatar,
					age: this.age,
					gender: this.gender
				}
				
				this.Http.axios('PUT',post_updateUser, data)
					.then((res) => {
						if (res.code == 0) {
							this.$tools.showToast2('资料修改成功')
							setTimeout(r => {
								this.$tools.back()
							}, 1000)
						} else {
							this.$tools.showToast2(res.mes)
						}
					})


			}
		}
	}
</script>

<style>
	.beijing {
		background-color: #FFFFFF;
		box-sizing: border-box;
	}

	.oneRow {
		padding: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	input {
		text-align: right;
		font-size: 28rpx;
		color: #333333;
	}

	.baocun {
		width: 500rpx;
		height: 80rpx;
		border-radius: 36rpx;
		background-color: #29EAC4;
		text-align: center;
		line-height: 80rpx;
		color: rgba(255, 255, 255, 0.7);
		font-size: 32rpx;
		position: absolute;
		bottom: 100rpx;
		color: white;
	}
</style>
